import React from 'react'
import { withRouter } from 'react-router-dom'
import { Pagination } from 'antd'

import './index.less'
class List extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            current: 1,
            total: props.data.length,
            pageSize: 6,
        }
    }

    render() {
        let { data, url } = this.props
        let { total, current, pageSize } = this.state
        let start = (current -1) * pageSize
        let end = (current -1) * pageSize + pageSize
        let filterData = data.slice(start, end)
        return (
            <div className="list">
                <ul className="main">
                {
                    !!filterData && filterData.map((item, index) => (
                        <li key={index}
                            onClick={
                                ()=>{
                                    this.props.history.push({
                                        pathname: url,
                                        search: `id=${item.id}`
                                    })
                                }
                            }
                        >
                            {/* <img style={{width: '100%', height: '138px'}} src={item.img} key={index}/> */}
                            <div className="title">
                                <h1 className="ell-two ell-two-ie" style={{maxHeight: '80px'}}>{item.title}</h1>
                                <p className="ell-two ell-two-ie" style={{maxHeight: '48px'}}>{item.desc}</p>
                            </div>
                            <div className="name">
                                <h1>Date</h1>
                                <p>{item.time}</p>
                            </div>
                        </li>
                    ))
                }
                </ul>
                <div style={{display: 'flex', justifyContent: 'flex-end', paddingRight: '38px'}}>
                    <Pagination
                        className="cus-pagination"
                        onChange={(currentPage, pageSize) => {
                            this.setState({ current: currentPage})
                        }}
                        current={current}
                        pageSize={pageSize}
                        total={total}
                        showTotal={(total) => `共${total}条`}
                        hideOnSinglePage
                    />
                </div>
            </div>
        )
    }
}
export default withRouter(List)